<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" th:href="@{/css/admin.css}" media="all" />
<style type="text/css">
    .table{
        width: 100%;
        max-width: 100%;
    }
    th{
        text-align: left;
    }
    .table>thead>tr>th , .table>tbody>tr>td{
        border-bottom: 1px solid #e7eaec!important;
        line-height: 34px;
    }
</style>
<body class="gray-bg" id="test">
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">CPU</div>
                <div class="layui-card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>属性</th>
                                <th>值</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>核心数</td>
                            <td th:text="${server.cpu.cpuNum}">0个</td>
                        </tr>
                        <tr>
                            <td>用户使用率</td>
                            <td th:text="${server.cpu.used + '%'}">0%</td>
                        </tr>
                        <tr>
                            <td>系统使用率</td>
                            <td th:text="${server.cpu.sys + '%'}">0%</td>
                        </tr>
                        <tr>
                            <td>当前空闲率</td>
                            <td th:text="${server.cpu.free + '%'}">0%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内存</div>
                <div class="layui-card-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>内存</th>
                            <th>JVM</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>总内存</td>
                            <td th:text="${server.mem.total + 'G'}">0GB</td>
                            <td th:text="${server.jvm.total + 'M'}">0MB</td>
                        </tr>
                        <tr>
                            <td>已用内存</td>
                            <td th:text="${server.mem.used + 'G'}">0GB</td>
                            <td th:text="${server.jvm.used + 'M'}">0MB</td>
                        </tr>
                        <tr>
                            <td>剩余内存</td>
                            <td th:text="${server.mem.free + 'G'}">0GB</td>
                            <td th:text="${server.jvm.free + 'M'}">0MB</td>
                        </tr>
                        <tr>
                            <td>使用率</td>
                            <td th:class="${server.mem.usage gt 80} ? 'text-danger'">[[${server.mem.usage}]]%</td>
                            <td th:class="${server.jvm.usage gt 80} ? 'text-danger'">[[${server.jvm.usage}]]%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body">
                    <table class="table table-hover margin bottom">
                        <tbody>
                        <tr>
                            <td>服务器名称</td>
                            <td th:text="${server.sys.computerName}">RuoYi</td>
                            <td>操作系统</td>
                            <td th:text="${server.sys.osName}">Linux</td>
                        </tr>
                        <tr>
                            <td>服务器IP</td>
                            <td th:text="${server.sys.computerIp}">127.0.0.1</td>
                            <td>系统架构</td>
                            <td th:text="${server.sys.osArch}">amd64</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">Java虚拟机信息</div>
                <div class="layui-card-body">
                    <table class="table table-hover margin bottom">
                        <tbody>
                        <tr>
                            <td>Java名称</td>
                            <td th:text="${server.jvm.name}">Java</td>
                            <td>Java版本</td>
                            <td th:text="${server.jvm.version}">1.8.0</td>
                        </tr>
                        <tr>
                            <td>启动时间</td>
                            <td th:text="${server.jvm.startTime}">2018-12-31 00:00:00</td>
                            <td>运行时长</td>
                            <td th:text="${server.jvm.runTime}">0天0时0分0秒</td>
                        </tr>
                        <tr>
                            <td colspan="1">安装路径</td>
                            <td colspan="3" th:text="${server.jvm.home}"></td>
                        </tr>
                        <tr>
                            <td colspan="1">项目路径</td>
                            <td colspan="3" th:text="${server.sys.userDir}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">磁盘状态</div>
                <div class="layui-card-body">
                    <table class="table table-hover margin bottom">
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="sysFile : ${server.sysFiles}">
                            <td th:text="${sysFile.dirName}">C:\</td>
                            <td th:text="${sysFile.sysTypeName}">NTFS</td>
                            <td th:text="${sysFile.typeName}">local</td>
                            <td th:text="${sysFile.total}">0GB</td>
                            <td th:text="${sysFile.free}">0GB</td>
                            <td th:text="${sysFile.used}">0GB</td>
                            <td th:class="${sysFile.usage gt 80} ? 'text-danger'">[[${sysFile.usage}]]%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;

        //监听折叠
        element.on('collapse(test)', function(data){
            layer.msg('展开状态：'+ data.show);
        });
    });
</script>
